<template>
  <div class="msg_l">
    <flexbox class="top">
      <img src="@/assets/img/admin/role_msg.png" alt="" />
      <span>消息列表</span>
    </flexbox>
    <ul>
      <li
        v-for="(item, index) in menuList"
        :class="activeMenu == index ? 'active_menu' : ''"
        @click="menuChange(index)"
        :key="index"
      >
        {{ item }}
        <el-badge
          :value="leftNum[index]"
          class="badge_item"
          v-if="leftNum[index] > 0"
        ></el-badge>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  /**
   * 消息中心-左侧菜单栏
   */
  data() {
    return {
      menuList: [
        "入学通知",
        "退学通知",
        "逾期通知",
        "合同通知",
        "回款通知",
        "退款通知",
        "导入导出通知",
        "转移分配通知",
        "协议签署通知"
      ],
    };
  },
  props: {
    activeMenu: {
      type: [String, Number],
      default: 0,
    },
    leftNum: {
      type: Array,
      default: () => {
        return  [0, 0, 0, 0, 0, 0, 0, 0]
      }
    },
  },
  methods: {
    menuChange(e) {
      this.$emit("menuChange", e);
    },
  },
};
</script>
<style scoped lang="scss">
.msg_l {
  width: 284px;
  height: 100%;
  padding: 16px;
  border-right: 1px solid #ebebeb;
  .top {
    align-items: center;
    margin-bottom: 19px;
    img {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      margin-right: 11px;
    }
    span {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }
  }
  ul {
    height: calc(100% - 42px);
    background: #f5f6fb;
    border-radius: 4px;
    li {
      list-style: none;
      font-size: 13px;
      font-weight: 400;
      color: #333333;
      height: 40px;
      line-height: 40px;
      padding-left: 32px;
      position: relative;
      cursor: pointer;
      .badge_item {
        position: absolute;
        right: 10px;
        top: 7px;
      }
    }
    li:hover {
      color: #0066f9;
      background: #edf1fc;
    }
    .active_menu {
      background: #edf1fc;
      color: #0066f9;
      position: relative;
    }
    //   li:hover::after
    .active_menu::after {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 100%;
      background: #0066f9;
      content: "";
    }
  }
}
</style>